import _ from 'lodash';
import React, { Component } from 'react';
import { StyleSheet, ScrollView, ImageBackground, Alert } from 'react-native';
import { Colors, View, Card, Button, Text } from 'react-native-ui-lib';
import { TestCase, TestSuite } from '@rnoh/testerino';

const featureIcon = require('../../assets/icons/star.png');
const cardImage = require('../../assets/images/card-example.jpg');
const cardImage2 = require('../../assets/images/empty-state.jpg');

type CardsScreenProps = {};
type CardsScreenState = {
  selected1: boolean;
  selected2: boolean;
  iconRefreshKey: number;
  iconLoading: boolean;
};

export default class CardsScreen extends Component<
  CardsScreenProps,
  CardsScreenState
> {
  state = {
    selected1: false,
    selected2: true,
    iconRefreshKey: 0,
    iconLoading: false,
  };

  handleIconRefresh = () => {
    this.setState({ iconLoading: true });
    setTimeout(() => {
      this.setState(prevState => ({
        iconRefreshKey: prevState.iconRefreshKey + 1,
        iconLoading: false
      }));
    }, 800);
  };

  renderDimensionsDemo = () => {
    return (
      <View row spread>
        <Card height={80} width={100} center bg-red60>
          <Text white text90>H:80 W:100</Text>
        </Card>
        <Card height={100} width={200} center bg-blue60>
          <Text white text90>H:80 W:200</Text>
        </Card>
      </View>
    );
  };

  renderInteractionDemo = () => {
    return (
      <View row spread>
        <Card
          height={80}
          width={150}
          center
          bg-green60
          onPress={() => Alert.alert('Pressed Scale', 'This card scales down on press')}
          activeScale={0.9}
          activeOpacity={1}
        >
          <Text white text80>Press Me (Scale)</Text>
        </Card>

        <Card
          height={80}
          width={150}
          center
          bg-orange60
          onPress={() => Alert.alert('Pressed Opacity', 'This card changes opacity on press')}
          activeScale={1}
          activeOpacity={0.5}
        >
          <Text white text80>Press Me (Opacity)</Text>
        </Card>
      </View>
    );
  };

  renderRowDemo = () => {
    return (
      <View>
        <Text text90 grey40 marginB-5>Default (Column)</Text>
        <Card height={120} width={300} marginB-10 padding-10>
          <Card.Section imageSource={featureIcon} imageStyle={{ width: 30, height: 30 }} />
          <Card.Section content={[{ text: 'Title Below Icon', text70: true }]} />
        </Card>

        <Text text90 grey40 marginB-5>Prop: row={'{true}'}</Text>
        <Card row height={80} width={300} padding-10 centerV>
          <Card.Section imageSource={featureIcon} imageStyle={{ width: 30, height: 30 }} />
          <Card.Section content={[{ text: 'Title Next to Icon', text70: true }]} style={{ marginLeft: 10 }} />
        </Card>
      </View>
    );
  };

  renderSelectionDemo = () => {
    const { selected1, selected2 } = this.state;
    return (
      <View row spread>
        <Card
          height={100}
          width={150}
          center
          onPress={() => this.setState({ selected1: !selected1 })}
          selected={selected1}
        >
          <Text text80>Default Selection</Text>
          <Text text90 grey40>{selected1 ? 'Selected' : 'Unselected'}</Text>
        </Card>

        <Card
          height={100}
          width={150}
          center
          onPress={() => this.setState({ selected2: !selected2 })}
          selected={selected2}
          selectionOptions={{
            color: Colors.red30,
            indicatorSize: 20,
            borderWidth: 4,
          }}
        >
          <Text text80>Custom Selection</Text>
          <Text text90 grey40>Red Border</Text>
        </Card>
      </View>
    );
  };

  renderBorderRadiusDemo = () => {
    return (
      <View row spread>
        <Card height={80} width={100} center bg-grey70 borderRadius={0}>
          <Text text90>Radius: 0</Text>
        </Card>
        <Card height={80} width={100} center bg-grey70 borderRadius={10}>
          <Text text90>Radius: 10</Text>
        </Card>
        <Card height={80} width={100} center bg-grey70 borderRadius={40}>
          <Text text90>Radius: 40</Text>
        </Card>
      </View>
    );
  };

  renderShadowDemo = () => {
    return (
      <View row spread>
        <Card height={80} width={150} center bg-white enableShadow={true}>
          <Text text80>Shadow: True</Text>
        </Card>
        <Card
          height={80}
          width={150}
          center
          bg-white
          enableShadow={false}
          containerStyle={{ borderWidth: 1, borderColor: Colors.grey60 }}
        >
          <Text text80>Shadow: False</Text>
        </Card>
      </View>
    );
  };

  renderContainerStyleDemo = () => {
    return (
      <View row spread>
        <Card
          height={80}
          width={160}
          center
          bg-white
          containerStyle={{
            borderWidth: 2,
            borderColor: Colors.violet30,
            borderStyle: 'dashed',
          }}
        >
          <Text text80 violet30>Dashed Style</Text>
        </Card>

        <Card
          height={80}
          width={160}
          center
          bg-white
          containerStyle={{
            borderWidth: 4,
            borderColor: Colors.green30,
            borderRadius: 20,
            backgroundColor: Colors.green80
          }}
        >
          <Text text80 green30>Solid & Round</Text>
        </Card>
      </View>
    );
  };

  renderBlurDemo = () => {
    return (
      <View row spread>
        <View>
          <Text text90 marginB-5 center>Amount: 5 (Low)</Text>
          <ImageBackground
            source={cardImage}
            style={{ width: 150, height: 120, justifyContent: 'center', alignItems: 'center' }}
            resizeMode="cover"
          >
            <Card
              height={60}
              width={100}
              center
              enableBlur={true}
              blurOptions={{ blurType: 'light', amount: 5 }}
              containerStyle={{ backgroundColor: 'transparent', borderColor: 'rgba(255,255,255,0.6)', borderWidth: 1 }}
            >
              <Text text80 black>Low</Text>
            </Card>
          </ImageBackground>
        </View>

        <View>
          <Text text90 marginB-5 center>Amount: 30 (High)</Text>
          <ImageBackground
            source={cardImage}
            style={{ width: 150, height: 120, justifyContent: 'center', alignItems: 'center' }}
            resizeMode="cover"
          >
            <Card
              height={60}
              width={100}
              center
              enableBlur={true}
              blurOptions={{ blurType: 'light', amount: 30 }}
              containerStyle={{ backgroundColor: 'transparent', borderColor: 'rgba(255,255,255,0.6)', borderWidth: 1 }}
            >
              <Text text80 black>High</Text>
            </Card>
          </ImageBackground>
        </View>
      </View>
    );
  };

  renderCardImageDemo = () => {
    return (
      <View>
        <Text text90 grey40 marginB-5>Different Sizes (Height × Width)</Text>
        <View row spread marginB-15>
          <Card width={150} height={180} borderRadius={8}>
            <Card.Image source={cardImage} height={80} width={150} />
            <Text margin-10 text80>H:80 W:150</Text>
            <Text marginH-10 text90 grey40>Small Image</Text>
          </Card>
          <Card width={150} height={180} borderRadius={8}>
            <Card.Image source={cardImage} height={120} width={150} />
            <Text margin-10 text80>H:120 W:150</Text>
            <Text marginH-10 text90 grey40>Large Image</Text>
          </Card>
        </View>

        <Text text90 grey40 marginB-5>Position: Top vs Bottom</Text>
        <View row spread>
          <Card width={150} height={150} borderRadius={8}>
            <Card.Image source={cardImage2} height={80} position="top" />
            <Text margin-10 text80>Position: Top</Text>
          </Card>
          <Card width={150} height={150} borderRadius={8}>
            <Card.Image source={cardImage2} height={80} position="bottom" />
            <Text margin-10 text80>Position: Bottom</Text>
          </Card>
        </View>
      </View>
    );
  };

  renderCardSectionBackgroundDemo = () => {
    return (
      <View row spread>
        <Card width={150} height={120} padding-10>
          <Card.Section
            backgroundColor={Colors.blue70}
            content={[{ text: 'Blue Background', text80: true, white: true }]}
            contentStyle={{ padding: 15 }}
          />
        </Card>
        <Card width={150} height={120} padding-10>
          <Card.Section
            backgroundColor={Colors.purple70}
            content={[{ text: 'Purple Background', text80: true, white: true }]}
            contentStyle={{ padding: 15 }}
          />
        </Card>
      </View>
    );
  };

  renderCardSectionContentDemo = () => {
    return (
      <View>
        <Text text90 grey40 marginB-5>Single Text vs Multiple Texts</Text>
        <View row spread marginB-15>
          <Card width={150} padding-15>
            <Card.Section
              content={[
                { text: 'Simple Text', text70: true }
              ]}
            />
          </Card>
          <Card width={150} padding-15>
            <Card.Section
              content={[
                { text: 'Title Text', text70: true, red30: true },
                { text: 'Subtitle here', text90: true, grey40: true }
              ]}
            />
          </Card>
        </View>

        <Text text90 grey40 marginB-5>Complex Content Array</Text>
        <Card width={320} padding-15>
          <Card.Section
            content={[
              { text: 'Main Title', text60: true, blue30: true },
              { text: 'Secondary Info', text80: true, grey30: true },
              { text: 'Additional Details', text90: true, grey50: true }
            ]}
          />
        </Card>
      </View>
    );
  };

  renderCardSectionStyleDemo = () => {
    return (
      <View row spread>
        <Card width={150} height={120}>
          <Card.Section
            content={[
              { text: 'Centered', text80: true, blue30: true }, 
              { text: '& Dashed', text90: true, blue50: true }  
            ]}
            contentStyle={{
              width: '100%',
              height: '100%',
              justifyContent: 'center', 
              alignItems: 'center',     
              borderWidth: 2,
              borderColor: Colors.blue30,
              borderStyle: 'dashed',
              backgroundColor: Colors.blue80
            }}
          />
        </Card>

        <Card width={150} height={120}>
          <Card.Section
            content={[
              { text: 'Bottom', text80: true, white: true },
              { text: 'Right', text70: true, white: true, fontWeight: 'bold' }
            ]}
            contentStyle={{
              width: '100%',
              height: '100%', 
              justifyContent: 'flex-end', 
              alignItems: 'flex-end',     
              padding: 15,
              backgroundColor: Colors.purple30,
              borderTopLeftRadius: 40     
            }}
          />
        </Card>
      </View>
    );
  };

  renderCardSectionImageDemo = () => {
    return (
      <View>
        <Text text90 grey40 marginB-5>imageSource + imageStyle</Text>
        <View row spread marginB-15>
          <Card width={150} height={120}>
            <Card.Section
              imageSource={cardImage}
              imageStyle={{ width: 50, height: 50, borderRadius: 25 }}
            />
          </Card>
          <Card width={150} height={120}>
            <Card.Section
              imageSource={cardImage2}
              imageStyle={{ width: 80, height: 60, borderRadius: 8 }}
            />
          </Card>
        </View>

        <Text text90 grey40 marginB-5>imageProps (opacity + resizeMode)</Text>
        <View row spread>
          <Card width={150} height={100}>
            <Card.Section
              imageSource={featureIcon}
              imageStyle={{ width: 60, height: 60 }}
              imageProps={{ opacity: 0.3}}
            />
          </Card>
          <Card width={150} height={100}>
            <Card.Section
              imageSource={featureIcon}
              imageStyle={{ width: 60, height: 60 }}
              imageProps={{ opacity: 1}}
            />
          </Card>
        </View>
      </View>
    );
  };

  renderCardSectionIconsDemo = () => {
    const { iconRefreshKey, iconLoading } = this.state;
    return (
      <View>
        <View row spread centerV marginB-10>
          <Text text90 grey40>leadingIcon Only</Text>
          <Button
            label={iconLoading ? "加载中..." : "刷新"}
            size={Button.sizes.xSmall}
            backgroundColor={iconLoading ? Colors.grey40 : Colors.blue30}
            onPress={this.handleIconRefresh}
            disabled={iconLoading}
          />
        </View>
        {iconLoading ? (
          <View center padding-20>
            <Text text70 blue30>正在重新渲染 leadingIcon...</Text>
            <Text text90 grey40 marginT-5>请稍候 (800ms)</Text>
          </View>
        ) : (
          <View>
            <Card key={`leading-${iconRefreshKey}`} width={320} padding-15 marginB-15>
              <Card.Section
                content={[{ text: 'With Leading Icon', text70: true }]}
                leadingIcon={{ source: featureIcon, style: { width: 30, height: 30, tintColor: Colors.blue30 } }}
              />
            </Card>

            <Text text90 grey40 marginB-5>trailingIcon Only</Text>
            <Card key={`trailing-${iconRefreshKey}`} width={320} padding-15 marginB-15>
              <Card.Section
                content={[{ text: 'With Trailing Icon', text70: true }]}
                trailingIcon={{ source: featureIcon, style: { width: 30, height: 30, tintColor: Colors.red30 } }}
              />
            </Card>

            <Text text90 grey40 marginB-5>Both Icons</Text>
            <Card key={`both-${iconRefreshKey}`} width={320} padding-15>
              <Card.Section
                content={[{ text: 'Leading & Trailing', text70: true }]}
                leadingIcon={{ source: featureIcon, style: { width: 25, height: 25, tintColor: Colors.green30 } }}
                trailingIcon={{ source: featureIcon, style: { width: 25, height: 25, tintColor: Colors.orange30 } }}
              />
            </Card>
          </View>
        )}
      </View>
    );
  };


  render() {
    return (
      <TestSuite name="Card">
        <TestCase itShould="[height, width] Control card dimensions">
          <View centerH padding-10>{this.renderDimensionsDemo()}</View>
        </TestCase>

        <TestCase itShould="[onPress, activeScale] Interaction feedback">
          <View centerH padding-10>{this.renderInteractionDemo()}</View>
        </TestCase>

        <TestCase itShould="[row] Layout direction (Vertical vs Horizontal)">
          <View centerH padding-10>{this.renderRowDemo()}</View>
        </TestCase>

        <TestCase itShould="[selected, selectionOptions] Selection state visualization">
          <View centerH padding-10>{this.renderSelectionDemo()}</View>
        </TestCase>

        <TestCase itShould="[borderRadius] Corner rounding">
          <View centerH padding-10>{this.renderBorderRadiusDemo()}</View>
        </TestCase>

        <TestCase itShould="[enableShadow] Toggle shadow visibility">
          <View centerH padding-10>{this.renderShadowDemo()}</View>
        </TestCase>

        <TestCase itShould="[containerStyle] Apply custom border style to container">
          <View centerH padding-10>{this.renderContainerStyleDemo()}</View>
        </TestCase>

        <TestCase itShould="[enableBlur] Glassmorphism effect (Same Image, Different Amount)">
          <View centerH padding-10>{this.renderBlurDemo()}</View>
        </TestCase>

        <TestCase itShould="[Card.Image: height, width, position] Image dimensions and positioning">
          <View centerH padding-10>{this.renderCardImageDemo()}</View>
        </TestCase>

        <TestCase itShould="[Card.Section: backgroundColor] Section background color">
          <View centerH padding-10>{this.renderCardSectionBackgroundDemo()}</View>
        </TestCase>

        <TestCase itShould="[Card.Section: content] Text content array with styling">
          <View centerH padding-10>{this.renderCardSectionContentDemo()}</View>
        </TestCase>

        <TestCase itShould="[Card.Section: contentStyle] Custom container styling">
          <View centerH padding-10>{this.renderCardSectionStyleDemo()}</View>
        </TestCase>

        <TestCase itShould="[Card.Section: imageSource, imageStyle, imageProps] Background image configuration">
          <View centerH padding-10>{this.renderCardSectionImageDemo()}</View>
        </TestCase>

        <TestCase itShould="[Card.Section: leadingIcon, trailingIcon] Icon positioning">
          <View centerH padding-10>{this.renderCardSectionIconsDemo()}</View>
        </TestCase>
      </TestSuite>
    );
  }
}

StyleSheet.create({
  container: {},
});
